<template>
  <div>

    <el-button type="success" plain @click="addr()">{{input}}</el-button>
    <!-- 模态窗口-->
    <el-dialog title="添加地址" :visible.sync="dialogFormVisible">

      省市区：<el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
      详细地址：<el-input v-model="input" placeholder="请输入详细地址"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <div >
      <el-table
        :data="orderdetail"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="180" align="center"></el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>
        <el-table-column prop="goodsNumber" label="数量" align="center"></el-table-column>
      </el-table>
      <div class="total_warpper">
        <!--<h3>共计：{{totalPrice}}</h3>-->

        <el-button type="danger" @click="subject()">立即支付</el-button>

      </div>


      <div>

      </div>

    </div>




  </div>
</template>

<script>

  import {regionData,CodeToText} from 'element-china-area-data'
  export default {
    name: 'order',
    components: {},
    data () {
      return {
        options: regionData,
        selectedOptions: [],
        addtions:{},			//存储地址数据
        input: '点击添加地址',
        orderdetail: [],

        multipleSelection: [],
        dialogFormVisible: false,

        order: {
          id: '',
          addrs: '',
          totalPrice: 0,
        }
      }
    },
    methods: {
      handleChange (value) {
        //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
        //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
        this.addtions.selectedOptions = value
        var name = ''
        this.selectedOptions.map(item => name += CodeToText[item] + '/')
        this.addtions.names = name
        // console.log(this.addtions.names)
        console.log(this.addtions)
        this.input = this.addtions.names;
      },
      getOrder (id) {
        this.$axios.get("/orderdetail/findByOid?id=" + id  ).then(res=>{
          this.orderdetail = res.data.data;

        })
      },
      sub(){
        this.dialogFormVisible = false;
        this.order.id = this.$route.params.id;
        this.order.addrs = this.input;
        this.$axios.post("/order/updateAddr",this.order  ).then(res=>{


        })
      },
      addr(){
        this.dialogFormVisible = true
      },

      subject(){

        if(this.input == '点击添加地址'){
          // this.$router.push({name:"order"})
          alert("请选择地址！！！")
        }else{

          alert(this.order.totalPrice)
          alert(this.order.id);
        this.$axios.post("/pay",this.order  ).then(res=>{


        })}
      }
    },
    mounted(){
      this.order.totalPrice = this.$route.params.totalPrice;
      this.getOrder(this.$route.params.id);
    },

  }

</script>
